<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="${webPath}/static/scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#inputs").change(function() {
			var fil = this.files;
			if (fil.length > 0) {
				reads(fil[0]);
			}
		});
	});

	function reads(fil) {
		var reader = new FileReader();
		reader.readAsDataURL(fil);
		reader.onload = function() {
			$("#imgId").attr('src', reader.result); 
		};
	}
</script>
</head>
<body>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h2>Java 实现图片等比例缩略图</h2>
		</div>
		<div class="panel-body">
			<form action="thumbnail" method="post" enctype="multipart/form-data">
				<h2>请选择上传的图片</h2>
				<div class="form-group">
					<input type="file" name="image" id="inputs" />
				</div>
				<div class="form-group">
					<button class="btn btn-success" type="submit">开始上传</button>
				</div>
			</form>
		</div>
		<div><img width="120px" height="120px" id="imgId" alt="头像" src="${webPath}/static/images/my_photo.png"/></div>
	</div>
</body>
</html>